import React, { useEffect, useState, Component } from "react";


import { Map, Marker } from 'react-amap';

import {
  Card,
  Form,
  Button,
  Input,
  message,
  DatePicker,
  Cascader,
  Checkbox,
  Upload,
  Modal,
} from "antd";

import { PlusOutlined } from "@ant-design/icons";
import { apiGetHousingList, apihousingAdd } from "../../api";
import { useNavigate } from "react-router-dom";
import Timedata from "../../component/Time";
import "./style.css";


import moment from "moment";
const { RangePicker } = DatePicker;

const HousingAdd = () => {


  
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const [data, setData]: any = useState({});
  const [img, setimg] = useState("");
  const [housinglist, sethousinglist] = useState([]);
  const onFinish = (value: any) => {
    setData(value);
  };

  useEffect(() => {
    Housing();
  }, []);

  const Housing = () => {
    apiGetHousingList().then((res: any) => {
      sethousinglist(res.data);
    });
  };

  const options = [
    {
      value: "zhejiang",
      label: "Zhejiang",
      children: [
        {
          value: "hangzhou",
          label: "Hangzhou",
          children: [
            {
              value: "xihu",
              label: "West Lake",
            },
          ],
        },
      ],
    },
  ];

  function onChange(value: any) {
    console.log(value);
  }

  //日期
  const dateFormat = "YYYY/MM/DD";

  //图片
  const imgTU = (file: any) => {
    if (file.file.response) {
      setimg(file.file.response.data.url);
    }
  };

  //创建
  const establish = () => {
    const add = {
      img: img,
      name: data.name,
      district: data.district,
      total_prices: "1000",
      tel: data.tel,
      developers: data.developers,
      packet: data.packet,
      architecture: data.architecture,
      area: data.area,
      plotratio: data.plotratio,
      planningnumber: data.planningnumber,
      property: data.property,
      propertyfee: data.propertyfee,
      periodint: data.periodint,
      averag: data.averag,
      averageprice: data.averageprice,
      panoramathechecking: data.panoramathechecking,
      realestateisintroduced: data.realestateisintroduced,
      areaofstructure: data.areaofstructure,
      afforest: data.afforest,
      stall: data.stall,
      propertyanagementcompany: data.propertyanagementcompany,
      forwardsale: data.forwardsale,
      time: Timedata(new Date().getTime()),
    };
    apihousingAdd(add).then((res: any) => {
      if (res.code === 1) {
        message.success(res.mess);
        // 发布成功之后 返回上一页
        window.history.go(-1);
        Housing();
      }
    });
  };

  return (
    <div className="lpbox">
      <Card title="新增楼盘" style={{ width: 1650 }}>
        <Form onFinish={onFinish} className="Fromlist">
          <div>
            <Form.Item
              label="所属地区"
              className="snaji"
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <Cascader
                options={options}
                onChange={onChange}
                placeholder="请选择省份"
              />
            </Form.Item>

            <Form.Item
              label="楼盘名称"
              name="name"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入楼盘名称" />
            </Form.Item>
            <Form.Item
              label="楼盘地址"
              name="district"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入楼盘地址" />
            </Form.Item>
            <Form.Item
              label="开盘时间"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <DatePicker
                defaultValue={moment("2015/01/01", dateFormat)}
                format={dateFormat}
              />
            </Form.Item>

            <Form.Item
              label="售楼电话"
              name="tel"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入售楼电话" />
            </Form.Item>

            <Form.Item
              label="开发商"
              name="developers"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入开发商" />
            </Form.Item>

            <Form.Item
              label="购房红包"
              name="packet"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入购房红包" />
            </Form.Item>

            <Form.Item
              label="装修情况"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <Checkbox onChange={onChange}>毛培</Checkbox>
              <Checkbox onChange={onChange}>简装</Checkbox>
              <Checkbox onChange={onChange}>精装</Checkbox>
              <Checkbox onChange={onChange}>豪装</Checkbox>
            </Form.Item>

            <Form.Item
              label="销售状态"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <Checkbox onChange={onChange}>在售</Checkbox>
              <Checkbox onChange={onChange}>新盘</Checkbox>
              <Checkbox onChange={onChange}>尾盘</Checkbox>
              <Checkbox onChange={onChange}>售馨</Checkbox>
              <Checkbox onChange={onChange}>未开盘</Checkbox>
            </Form.Item>

            <Form.Item
              label="楼盘状态"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <Checkbox onChange={onChange}>住宅</Checkbox>
              <Checkbox onChange={onChange}>别墅</Checkbox>
              <Checkbox onChange={onChange}>商铺</Checkbox>
              <Checkbox onChange={onChange}>写字楼</Checkbox>
              <Checkbox onChange={onChange}>公寓</Checkbox>
              <Checkbox onChange={onChange}>底商</Checkbox>
            </Form.Item>
            <Form.Item
              label="特色标签"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <Checkbox onChange={onChange}>小户型</Checkbox>
              <Checkbox onChange={onChange}>低密居所</Checkbox>
              <Checkbox onChange={onChange}>旅游地产</Checkbox>
              <Checkbox onChange={onChange}>教育地产</Checkbox>
              <Checkbox onChange={onChange}>宜居生态</Checkbox>
              <Checkbox onChange={onChange}>海景楼盘</Checkbox>
            </Form.Item>

            <Form.Item
              label="推荐位"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <Checkbox onChange={onChange}>首页热搜楼盘</Checkbox>
              <Checkbox onChange={onChange}>首页热搜推荐</Checkbox>
              <Checkbox onChange={onChange}>首页刚需推荐</Checkbox>
              <Checkbox onChange={onChange}>新房列表推荐</Checkbox>
            </Form.Item>

            <Form.Item
              label="上传图片"
              name="img"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Upload.Dragger
                name="files"
                action="/api/upload"
                onChange={imgTU}
              >
                {img ? (
                  <img src={img} alt="avatar" style={{ width: "100%" }} />
                ) : (
                  <PlusOutlined />
                )}
              </Upload.Dragger>
            </Form.Item>
            <Form.Item
              label="看房视频"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            ></Form.Item>

            <Form.Item
              label="均价"
              name="averag"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入均价" />
            </Form.Item>

            <Form.Item
              label="售楼处"
              name="averageprice"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入售楼处" />
            </Form.Item>
          </div>

          <div>
            <Form.Item
              label="交房时间"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 500 }}
            >
              <DatePicker
                defaultValue={moment("2015/01/01", dateFormat)}
                format={dateFormat}
              />
            </Form.Item>

            <Form.Item
              label="预售证号"
              name="forwardsale"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入预售证号" />
            </Form.Item>

            <Form.Item
              label="地图坐标"
              name=""
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
              style={{ width: 400 }}
              className="ditu"
            >
              <Input placeholder="请输入地图坐标" />
              <Button onClick={showModal}>地图</Button>
            </Form.Item>
            <Form.Item
              label="全景看房"
              name="panoramathechecking"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="请输入学校所在位置" />
            </Form.Item>
            <Form.Item
              label="楼盘介绍"
              name="realestateisintroduced"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="楼盘介绍" />
            </Form.Item>

            <Form.Item
              label="建筑类型"
              name="architecture"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="建筑类型" />
            </Form.Item>
            <Form.Item
              label="占地面积"
              name="area"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="占地面积" />
            </Form.Item>
            <Form.Item
              label="容积率"
              name="plotratio"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="容积率" />
            </Form.Item>
            <Form.Item
              label="规划户型"
              name="planningnumber"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="规划户型" />
            </Form.Item>
            <Form.Item
              label="物业类型"
              name="property"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="物业类型" />
            </Form.Item>
            <Form.Item
              label="物业费"
              name="propertyfee"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="物业费" />
            </Form.Item>
            <Form.Item
              label="产权年限"
              name="periodint"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="产权年限" />
            </Form.Item>
            <Form.Item
              label="建筑面积"
              name="areaofstructure"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="建筑面积" />
            </Form.Item>
            <Form.Item
              label="绿化"
              name="afforest"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="绿化" />
            </Form.Item>
            <Form.Item
              label="车位情况"
              name="stall"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="车位情况" />
            </Form.Item>
            <Form.Item
              label="物业公司"
              name="propertyanagementcompany"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
              style={{ width: 500 }}
            >
              <Input placeholder="物业公司" />
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 20 }}>
              <Button type="primary" htmlType="submit">
                确认
              </Button>

              <Button onClick={establish}>发布</Button>
            </Form.Item>
          </div>
        </Form>

        <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <div style={{ width: "100%", height: "400px" }}>
            <Map amapkey={"788e08def03f95c670944fe2c78fa76f"} zoom={15}/>
          </div>
        </Modal>
      </Card>
    </div>
  );
};
export default HousingAdd;
